<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树莓派人脸识别</title>
    <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
    <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
    <script src="{{ url_for('static', filename='js/stream.js') }}"></script>
    <!-- <script>startStreamInit();</script> -->
    <script>initializeSocket();</script>

</head>
<body>
    <button onclick="showPage('videoPage')">显示视频页面</button>
    <button onclick="showPage('adminPage')">显示后台页面</button>

    <!-- 视频页面 -->
    <div id="videoPage" class="page active">
        <div style="display: flex; gap: 20px;">
            <div>
                <h2>视频页面</h2>
                <!-- <img id="image" style="width:640px;height:480px; margin-left: 40px;" />
                <script>startStreaming();</script> -->
            </div>
            <div>
                <h2>录入人脸</h2>
                <form id="dateEntry">
                    <label for="name">姓名：</label><br>
                    <input type="text" id="name" name="name"><br><br>
                    <button type="submit" onclick="submitForm(event)">录入</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 后台页面 -->
    <div id="adminPage" class="page">
        <h2>后台管理</h2>
        <script>image_show();</script>
    </div>
</body>
</html>
